<script lang="ts">
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import { LEARN_LEVEL, LearnState, TextState } from '$lib/api/proto/roadmap_data_type_api';
	import moment from 'moment';
	import AddNodeStateModal from '../modals/AddNodeStateModal.svelte';
	import { roadmapStore } from '../store.svelte';
	import { EllipsisVertical } from 'lucide-svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { appStore } from '$lib/stores/app.svelte';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';

	let showAddModal = $state(false);

	const stateList = $derived(
		roadmapStore.nodeStateList.filter(
			(item) =>
				roadmapStore.selectNodeIdList.length > 0 && item.nodeId == roadmapStore.selectNodeIdList[0]
		)
	);

	async function removeState(nodeId: string, stateId: string) {
		if (userStore.userSession == null) {
			return;
		}
		await callApi(
			appStore.roadmapDataStateApiClient.remove({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: nodeId,
				stateId: stateId
			}).response
		);
		roadmapStore.onRemoveNodeState(nodeId, stateId);
	}
</script>

{#snippet textState(stateContent: TextState)}
	<div>
		<h3 class="text-2xl font-bold">学习笔记</h3>
		<SimpleEditor sizeClass="" data={stateContent.content} readOnly />
	</div>
{/snippet}

{#snippet learnState(stateContent: LearnState)}
	<div>
		<h3 class="text-2xl font-bold">掌握程度</h3>
		<p>
			掌握程度标记为 <b>
				{#if stateContent.learnLevel == LEARN_LEVEL.LEARN_LEVEL_KNOW}
					了解
				{:else if stateContent.learnLevel == LEARN_LEVEL.LEARN_LEVEL_KNOW_WELL}
					熟悉
				{:else if stateContent.learnLevel == LEARN_LEVEL.LEARN_LEVEL_MASTER}
					掌握
				{:else if stateContent.learnLevel == LEARN_LEVEL.LEARN_LEVEL_SKILLFUL}
					精通
				{/if}
			</b>
		</p>
	</div>
{/snippet}

<div class="bg-base-200 w-[400px] rounded-box">
	<div class="flex justify-between p-2 items-center">
		<h2 class="font-bold text-2xl">学习记录</h2>
		{#if roadmapStore.roadmapMode == 'update'}
			<button class="btn btn-secondary" onclick={() => (showAddModal = true)}>增加</button>
		{/if}
	</div>
	<div class="h-[calc(100vh-240px)] overflow-y-auto mr-2">
		<ul class="list bg-base-100 rounded-box shadow-md w-[360px] m-2">
			{#each stateList as state}
				<li class="list-row w-full relative">
					<div class="absolute right-[30px] -top-[4px] flex gap-2 items-center">
						{moment(Number(state.timeStamp)).format('YYYY-MM-DD HH:mm:ss')}
						{#if roadmapStore.roadmapMode == 'update'}
							<div class="dropdown">
								<div tabindex="0" role="button" class="btn btn-ghost">
									<EllipsisVertical size={16} />
								</div>
								<ul
									class="menu dropdown-content bg-base-100 rounded-box z-1 w-[80px] p-2 shadow-sm gap-2"
								>
									<li class="text-error">
										<button
											type="button"
											class="btn btn-ghost"
											onclick={() => removeState(state.nodeId, state.stateId)}>删除</button
										>
									</li>
								</ul>
							</div>
						{/if}
					</div>
					{#if state.state != undefined && state.state.typeUrl.endsWith('.TextState')}
						{@render textState(Any.unpack(state.state, TextState))}
					{:else if state.state != undefined && state.state.typeUrl.endsWith('.LearnState')}
						{@render learnState(Any.unpack(state.state, LearnState))}
					{/if}
				</li>
			{/each}
		</ul>
	</div>
</div>

<div class="absolute -left-[10000px]">
	{#if showAddModal && roadmapStore.selectNodeIdList.length > 0}
		<AddNodeStateModal
			nodeId={roadmapStore.selectNodeIdList[0]}
			onClose={() => (showAddModal = false)}
		/>
	{/if}
</div>
